<template>
    <div
        @mousemove="handleMouseMove"
        class="hang-up"
        :class="{ move: isMouseMoving, stop: !isMouseMoving }"
    >
        <SvgIcon name="hang-up" width="6rem" height="6rem"></SvgIcon>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

let isMouseMoving = ref(false)
let timer: any = null

function handleMouseMove() {
    isMouseMoving.value = true
    clearTimeout(timer as number)
    timer = setTimeout(() => {
        isMouseMoving.value = false
    }, 2000) // 鼠标停止移动2秒后执行
}

onMounted(() => {
    window.addEventListener('mousemove', handleMouseMove)
})

onUnmounted(() => {
    if (timer) clearTimeout(timer)
    window.removeEventListener('mousemove', handleMouseMove)
})
</script>

<style scoped lang="scss">
.hang-up {
    clip-path: circle(50% at 50% 50%);
    transition: opacity 0.5s ease-in-out;

    :hover {
        cursor: pointer;
    }
}

.move {
    opacity: 1;
}

.stop {
    opacity: 0.1;
}
</style>
